import { Table, Tag, Space, Button, Popover } from 'antd';
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import axios from 'axios'
import {getData,DeleteUrl} from '../../../store/actions'
const { Column, ColumnGroup } = Table;
function Index(props) {
  
  useEffect(() => {
    if(!props.list) {
      props.fetchData()
    } 
    
  }, [props.list])
  const spliceList =(arr)=>{
    console.log(arr.id)
    props.deleteUrl(arr.id)
  }
      
      const columns = [
        {
          title: 'id',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: 'url',
          dataIndex: 'url',
          key: 'url',
          render: (text, record) => {
            const content = (
              <div>
                <p>{record.url}</p>
              </div>
            );
            return <Popover content={content} title="地址">
              <Button type="primary">地址</Button>
          </Popover>
          }
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          render: (text, record) => {
            console.log(record)
            if(record.status == 1 ) {
              return <Space size="middle">
              <a>已激活</a>
            </Space>
            } else {
              return <Space size="middle">
              <a>未激活</a>
            </Space>
            }
          }
        },
        {
          title: '编辑',
          dataIndex: '编辑',
          key: '编辑',
          render: (text, record) => {
            if(record.status == 1) {
              //如果是已激活
              return <div>
              <Space size="middle">
              <a onClick={()=>{spliceList(record)}}>删除</a>
            </Space>
            <Space size="middle">
              <a>下线</a>
            </Space>
            </div>
            } else {
              return <div>
              <Space size="middle">
              <a > 删除 </a>
            </Space>
            <Space size="middle">
              <a> 上线</a>
            </Space>
            </div>
            }
            
          },
        },
      ];
    return <div>
        <Button type="link" onClick={_ => props.history.push('/home/addlun')}>上传</Button>
        <Table columns={columns} dataSource={props.list}></Table>
    </div>
}
const mapStateToProps = (store) => {
  console.log(123, store)
  return {
    list: store.slides
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    fetchData() {
      getData(dispatch)
    },
    deleteUrl(id){
      DeleteUrl(dispatch,id)
    }
  }
  

}
export default connect(mapStateToProps, mapDispatchToProps)(Index)